<template>
  <div class="app-container">
    <el-button type="primary" @click="handleAddRole">创建新的权限</el-button>
    <el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="角色名" width="220">
        <template slot-scope="scope">
          {{ getRoleName(scope.row.key) }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="描述">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="资源类型">
        <template slot-scope="scope">
          <ul>
            <li v-for="resourceType in scope.row.resourceTypeList" :key="resourceType">{{ resourceType }}</li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作类型">
        <template slot-scope="scope">
          <ul>
            <li v-for="operationType in scope.row.operationTypeList" :key="operationType">{{ operationType }}</li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑角色':'新建角色'">
      <el-form :model="role" label-width="80px" label-position="left">
        <el-form-item label="角色名">
          <el-input v-model="role.name" placeholder="角色名" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
              v-model="role.description"
              :autosize="{ minRows: 2, maxRows: 4}"
              type="textarea"
              placeholder="描述"
          />
        </el-form-item>
        <el-form-item label="权限列表">
          <el-checkbox-group v-model="role.permissionList">
            <el-checkbox label="新建" />
            <el-checkbox label="读" />
            <el-checkbox label="写" />
            <el-checkbox label="删除" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="资源类型">
          <el-checkbox-group v-model="role.resourceTypeList">
            <el-checkbox label="HTML" />
            <el-checkbox label="CSS" />
            <el-checkbox label="TXT" />
            <el-checkbox label="EXE" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-checkbox-group v-model="role.operationTypeList">
            <el-checkbox label="新建" />
            <el-checkbox label="读" />
            <el-checkbox label="写" />
            <el-checkbox label="删除" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmRole">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { deepClone } from '@/utils'
import { getRoles, addRole, deleteRole, updateRole } from '@/api/User_Login'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  permissionList: [],
  resourceTypeList: [],
  operationTypeList: []
}

export default {
  data() {
    return {
      role: Object.assign({}, defaultRole),
      rolesList: [],
      dialogVisible: false,
      dialogType: 'new'
    }
  },
  created() {
    this.getRoles()
  },
  methods: {
    async getRoles() {
      // 设置角色列表
      this.rolesList = [
        {
          key: '1',
          name: '读',
          description: '读',
          resourceTypeList: ['HTML', 'CSS', 'TXT', 'EXE'],
          operationTypeList: ['读']
        },
        {
          key: '2',
          name: '修改',
          description: '修改权限',
          permissionList: ['修改'],
          resourceTypeList: ['HTML', 'CSS', 'TXT', 'EXE'],
          operationTypeList: ['写']
        },
        {
          key: '3',
          name: '新建',
          description: '新建',
          permissionList: ['新建'],
          resourceTypeList: ['HTML', 'CSS', 'TXT', 'EXE'],
          operationTypeList: ['新建']
        },
        {
          key: '4',
          name: '删除',
          description: '删除',
          permissionList: ['删除'],
          resourceTypeList: ['HTML', 'CSS', 'TXT', 'EXE'],
          operationTypeList: ['删除']
        }
      ]
    },
    handleAddRole() {
      this.role = Object.assign({}, defaultRole)
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      // this.role = deepClone(scope.row)
    },
    handleDelete({ $index, row }) {
      this.$confirm('确认删除该角色吗？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(async() => {
            // 模拟从服务器删除角色
            this.rolesList.splice($index, 1)
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          })
          .catch(err => { console.error(err) })
    },
    async confirmRole() {
      const isEdit = this.dialogType === 'edit'

      if (isEdit) {
        // 模拟更新角色
        for (let index = 0; index < this.rolesList.length; index++) {
          if (this.rolesList[index].key === this.role.key) {
            this.rolesList.splice(index, 1, Object.assign({}, this.role))
            break
          }
        }
      } else {
        // 模拟添加角色
        this.role.key = (this.rolesList.length + 1).toString()
        this.rolesList.push(this.role)
      }

      this.dialogVisible = false
      this.$notify({
        title: '成功',
        message: '操作成功！',
        type: 'success'
      })
    },
    getRoleName(key) {
      switch (key) {
        case '1':
          return '读'
        case '2':
          return '修改'
        case '3':
          return '新建'
        case '4':
          return '删除'
        default:
          return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
}
</style>
